import Popup from "@/components/Popup/Popup";
import to from "await-to-js";
import { defineComponent, reactive, ref } from "vue";
import styles from "./Detail.module.less";

export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  setup(props, { expose, emit }) {
    const detailPopupRef = ref(null as any);

    const state = reactive({
      id: null,
      cateName: null,
      content: null,
      contact: null,
    });

    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.id));
      if (!err) {
        console.log(res);
      }
    }

    const open = ({ id }) => {
      state.id = id;
      getDetail();
      detailPopupRef.value.open();
    };
    expose({
      open,
    })
    return () => (
      <Popup ref={detailPopupRef} title="留言详情" width="700px" oriState={state}>
        <div class={styles.container}>
          <div class={styles.rows}>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>留言分类名称</div>
                <div class={styles.colValue}>{state.cateName}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>留言内容</div>
                <div class={styles.colValue}>{state.content}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>联系方式</div>
                <div class={styles.colValue}>{state.contact}</div>
              </div>
            </div>
          </div>
        </div>
      </Popup>
    )
  }
})